//
import { useRef, useEffect } from "react"

import createXYChart3D from "../../../utils/createXYChart3D"

const GoodManagement = ({
  managementExcellenceBarChart = {},
  managementExcellenceTable = {}
}) => {
  const chartRef = useRef(null)
  const myChart = useRef(null)
  useEffect(() => {
    if (!myChart.current) {
      createXYChart3D(chartRef, myChart, managementExcellenceBarChart)
    }
  }, [managementExcellenceBarChart])

  return (
    <>
      {/* 管理较好 */}
      <div className="text-[12px] h-[245px] mt-[15px] rounded-[6px] p-[10px] bg-[rgb(233,240,247)]">
        <div className=" flex items-center justify-between">
          <div
            className="w-[365px] h-[36px] leading-[36px] "
            style={{
              backgroundImage: `url('assistant-decision/base-title_bg.png')`,
              backgroundRepeat: "no-repeat",
              backgroundSize: "cover"
            }}
          >
            <span className="ml-[30px] text-white text-[16px] font-[600]">
              管理较好
            </span>
          </div>
          <div className="flex items-center">
            <div
              className="w-[20px] h-[20px] ml-[12px]"
              style={{
                backgroundImage: `url('assistant-decision/think_icon.png')`
              }}
            ></div>
            <div className="text-[#008BFF]">展开思考过程</div>
          </div>
        </div>
        {/* 图表 */}
        <div ref={chartRef} className="w-full h-[220px]"></div>
      </div>
      {/* 管理较好方面 */}
      <div
        className="mt-[13px] w-[139px] h-[26px] text-white text-center leading-[26px]"
        style={{
          backgroundImage: `url('assistant-decision/base-business-title_bg-1.png')`,
          backgroundRepeat: "no-repeat",
          backgroundSize: "cover"
        }}
      >
        <span>管理较好方面</span>
      </div>
      <div className="mt-[13px] rounded-[5px]">
        <div className="flex items-center justify-between bg-[#BEDEFF] h-[37px] leading-[37px] font-[700] text-[#1F405F]">
          <div className="flex-1 indent-[60px]">领域</div>
          <div className="flex-1 text-center">问题数</div>
          <div className="flex-1 text-center">评价</div>
        </div>
        {managementExcellenceTable.map((item, index) => {
          return (
            <div
              key={index}
              className="flex items-center justify-between h-[37px] leading-[37px] bg-[rgba(255, 255, 255, 0.3779)] border-b-1"
              style={
                index === managementExcellenceTable.length - 1
                  ? { borderWidth: 0 }
                  : {}
              }
            >
              <div className="flex-1 indent-[60px]">{item.field}</div>
              <div className="flex-1 text-center">{item.problemCount}</div>
              <div className="flex-1 text-center flex justify-center">
                <div className="rounded-[8px] text-[#fff] w-[56px] h-[28px] leading-[28px] bg-[#1677FF]">
                  {item.evaluation}
                </div>
              </div>
            </div>
          )
        })}
      </div>
    </>
  )
}

export default GoodManagement
